{extend name="public/world"}
{block name="style"}{/block}
{block name="container"}
    <div class="layui-side layui-side-menu" style="width:175px;background-color: #fff;margin: 10px 0 10px 10px;padding-top:20px;">
        <div id="typeTree"></div>
    </div>
    <div class="layui-fluid" style="margin-left: 180px;">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-form" lay-filter="formSearch">
                    <div class="layui-field-box" style="padding:0;">
                        <div class="layui-form-item" style="margin-bottom:0">
                            <div class="layui-inline my-search">
                                <div class="layui-input-inline">
                                    <input type="text" name="name" value="" placeholder="按名称" autocomplete="off" class="layui-input" lay-filter="name">
                                </div>
                                <div class="layui-input-inline" style="width: 170px;">
                                    <input type="hidden" id="code" name="code" value="0">
                                    <button type="button" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary layui-btn-sm" title="清除条件" style="padding: 0 8px;" lay-submit lay-filter="reset"><i class="layui-icon" style="color:#009688;">&#xe640;</i></button>
                                    <button type="button" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-sm" lay-submit lay-filter="search">搜索</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
                <div style="margin-top: 5px;" id="subBox">
                    <table class="layui-hide" id="subTable" lay-filter="subTable" style="max-height: 400px;"></table>
                </div>
            </div>
        </div>
    </div>
{/block}
{block name="script"}
<script>
    layui.use(['form','table','tree'], function() {
        var $ = layui.$
            , form = layui.form
            , table = layui.table
            , tree = layui.tree;
        //渲染
        tree.render({
            elem: '#typeTree'  //绑定元素
            ,id: 'treeID'
            ,data: {:json_encode($treeData)}
            ,onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
            ,showLine: true
            ,click: function(obj){
                $('.layui-tree-set').removeClass('layui-tree-show');
                if(obj.data.id > 0) {
                    $(obj.elem).addClass('layui-tree-show');
                    $('#code').val(obj.data.id);
                } else {
                    $('#code').val(0);
                }
                $('#subBox').find('[lay-id="subTable"]').remove();
                tableIns.reload({
                    where: form.val("formSearch"),
                    page: {curr: 1}
                });
            }
        });
        form.on('submit(search)', function(){
            tableIns.reload({
                where: form.val("formSearch"),
                page: {curr: 1}
            });
        });
        //头工具栏事件
        form.on('submit(reset)', function(){
            var searchs = form.val("formSearch");
            for (var i in searchs) {
                if(i!='code') searchs[i] = '';
            }
            form.val("formSearch", searchs);
            tableIns.reload({
                where: form.val("formSearch"),
                page: {curr: 1}
            });
        });
        var tableIns = table.render({
            elem: '#dataTable'
            ,url: "{:url('/erp.Reserve/index')}" //数据接口
            ,where: form.val("formSearch")
            ,page: true //开启分页
            ,skin: 'row'
            ,even: true
            ,size: 'sm'
            ,limit: 20
            ,text: {
                none : '暂无商品'
            }
            ,toolbar: false
            ,defaultToolbar: false
            ,cols: [[ //表头
                {field: 'name', width: 230, title: '商品名称', fixed: 'left'}
                ,{field: 'stock', width: 70, title: '库存数量'}
                ,{field: 'max_stock', width: 70, title: '最大存量'}
                ,{field: 'min_stock', width: 70, title: '最小存量'}
                ,{field: 'retail_price', width: 80, title: '零售报价'}
                ,{field: 'retail_price_limit', width: 80, title: '零售限价'}
                ,{field: 'agent_price', width: 80, title: '分销报价'}
                ,{field: 'agent_price_limit', width: 80, title: '分销限价'}
                ,{field: 'norm', width: 300, title: '规格说明'}
            ]]
            ,done() {
                $('#subBox').find('[lay-id="subTable"]').remove();
            }
        });
        table.on('row(dataTable)', function(obj){
            if($(obj.tr).hasClass('row-in')) {
                //$(obj.tr).removeClass('row-in');
            } else {
                $(obj.tr).addClass('row-in').siblings('tr').removeClass('row-in');
                table.render({
                    elem: '#subTable'
                    ,url: "{:url('/erp.Reserve/index')}?op=sub" //数据接口
                    ,where: {id:obj.data.id}
                    ,page: false //开启分页
                    ,skin: 'row'
                    ,even: false
                    ,size: 'sm'
                    ,text: {
                        none : '暂无库房'
                    }
                    ,toolbar: false
                    ,defaultToolbar: false
                    ,cols: [[ //表头
                        {field: 'name', width: 350, title: '库房名称'}
                        ,{field: 'stock', width: 80, title: '库存数量'}
                    ]]
                });
            }
        });
    });
</script>
{/block}